<template>
  <div class="product_variant_modify">
    <el-dialog
      :title="variantProductDialogTitle"
      :visible.sync="visible"
      @close="$emit('update:show', false)"
      :show="show"
      width="80%"
      top="5vh"
    >
      <el-form ref="variantProductForm" :model="variantProductForm" label-width="100px">
        <div class="info-sec">
          <div class="title">
            <span class="fa fa-address-book-o">&nbsp;</span>基本信息
          </div>
          <div class="content">
            <div class="sub-info-sec">
              <div class="sub-content">
                <div class="row-block" style="display: flex">
                  <el-form-item
                    prop="name"
                    label="产品名称"
                    :rules="[{required:true,message:'请输入产品名称'}]"
                  >
                    <el-input placeholder="请输入" v-model="variantProductForm.name"></el-input>
                  </el-form-item>
                  <el-form-item
                    prop="descPrice"
                    label="价格描述"
                    :rules="[{required:true,message:'请输入价格描述'}]"
                  >
                    <el-input placeholder="请输入" v-model="variantProductForm.descPrice"></el-input>
                  </el-form-item>
                  <el-form-item label="季度付费">
                    <el-checkbox
                      v-model="variantProductForm.creditStrategy"
                      :rules="[{required:true}]"
                    ></el-checkbox>
                  </el-form-item>
                </div>
                <div class="row-block" style="display: flex">
                  <el-form-item
                    label="价格范围"
                    prop="priceType"
                    :rules="[{required:true,message:'请选择价格类型'}]"
                  >
                    <template>
                      <el-radio
                        v-model="variantProductForm.priceType"
                        :label="priceType.FIXED.val"
                      >{{priceType.FIXED.desc}}</el-radio>
                      <el-radio
                        v-model="variantProductForm.priceType"
                        :label="priceType.FLOAT.val"
                      >{{priceType.FLOAT.desc}}</el-radio>
                    </template>
                  </el-form-item>
                  <el-form-item
                    prop="price"
                    label="价格"
                    v-if="variantProductForm.priceType===priceType.FIXED.val"
                    :rules="[{required:true,message:'请输入价格'}]"
                  >
                    <el-input type="number" placeholder="请输入" v-model="variantProductForm.price"></el-input>
                  </el-form-item>
                </div>
                <div class="row-block" style="display: flex">
                  <el-form-item label="业务员积分" prop="ecType" :rules="[{required:true}]">
                    <template>
                      <el-radio v-model="variantProductForm.ecType" label="FIXED">固定积分</el-radio>
                      <el-radio v-model="variantProductForm.ecType" label="FLOAT">百分比积分</el-radio>
                    </template>
                  </el-form-item>
                  <el-form-item
                    prop="employeeCredit"
                    label="积分"
                    :rules="[{required:true,message:'请输入业务员积分'}]"
                  >
                    <el-input
                      type="number"
                      placeholder="请输入"
                      v-model="variantProductForm.employeeCredit"
                    >
                      <template slot="append" v-if="variantProductForm.ecType==='FLOAT'">%</template>
                    </el-input>
                  </el-form-item>
                </div>
                <div class="row-block" style="display: flex">
                  <el-form-item label="客户积分" prop="ccType" :rules="[{required:true}]">
                    <template>
                      <el-radio v-model="variantProductForm.ccType" label="FIXED">固定积分</el-radio>
                      <el-radio v-model="variantProductForm.ccType" label="FLOAT">百分比积分</el-radio>
                    </template>
                  </el-form-item>
                  <el-form-item
                    prop="customerCredit"
                    label="积分"
                    :rules="[{required:true,message:'请输入客户积分'}]"
                  >
                    <el-input
                      type="number"
                      placeholder="请输入"
                      v-model="variantProductForm.customerCredit"
                    >
                      <template slot="append" v-if="variantProductForm.ccType==='FLOAT'">%</template>
                    </el-input>
                  </el-form-item>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="info-sec">
          <div class="title">
            <span class="fa fa-address-book-o">&nbsp;</span>其他信息
          </div>
          <div class="content">
            <div class="row-block-img" style="display: flex">
              <el-form-item
                prop="titleImage"
                label="产品图片"
                :rules="[{required:true,message:'请选择产品图片'}]"
              >
                <el-upload
                  class="avatar-uploader"
                  :action="imageUploadUrl"
                  :show-file-list="false"
                  :on-success="handleUploadProductImageSuccess"
                  :before-upload="beforeImageUpload"
                >
                  <img v-if="productImageUrl" :src="productImageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-input type="hidden" v-model="variantProductForm.titleImage"></el-input>
              </el-form-item>
              <el-form-item
                prop="descImage"
                label="产品详情图片"
                :rules="[{required:true,message:'请选择产品详情图片'}]"
              >
                <el-upload
                  class="avatar-uploader"
                  :action="imageUploadUrl"
                  :show-file-list="false"
                  :on-success="handleUploadProductDetailImageSuccess"
                  :before-upload="beforeImageUpload"
                >
                  <img v-if="productDetailImageUrl" :src="productDetailImageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-input type="hidden" v-model="variantProductForm.descImage"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取消</el-button>
        <el-button
          type="primary"
          @click="status === 'NEW'?addProductVariant():modifyProductVariant()"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { PRICE_TYPE, BACKEND_URL } from '@/config/config';
import ajax from '@/api/ajax';

const DIALOG_STATUS = {
  NEW: 'NEW',
  MODIFY: 'MODIFY'
}

export default {
  name: 'product_variant_modify',

  props: {
    show: {
      type: Boolean,
      default: false
    },
    product: {
      type: Object
    },
    status: {
      type: String
    },
    variant: {
      type: Object
    }
  },
  data: function() {
    return {
      imageUploadUrl: `${BACKEND_URL}/api/upload/img/product`, // 图片上传地址
      productImageUrl: '',
      productDetailImageUrl: '',
      dialogStatus: DIALOG_STATUS,
      visible: this.show,
      priceType: PRICE_TYPE,
      /** **********变种产品相关*****************/
      showVariantProductDialog: false,
      variantProductDialogTitle:
        this.status === 'NEW' ? '新增变种产品' : '修改变种产品',
      variantProductForm: {
        name: '', // 产品名字
        descPrice: '', // 正常价格描述
        creditStrategy: false, // 是否按季度付费 积分获取类型

        titleImage: '', // Title图片
        descImage: '', // 产品描述文档

        priceType: 'FIXED', // 价格类型: FIXED FLOAT
        price: '', // 正常价格

        employeeCredit: '', // 业务员积分值
        customerCredit: '', // 客户积分值
        ecType: 'FIXED', // 业务员积分类型: FIXED FLOAT
        ccType: 'FIXED' // 客户积分类型: FIXED
      }
    }
  },

  methods: {
    /// /////////////变种产品相关/////////////////////
    // 新增变种产品
    addProductVariant() {
      this.$refs['variantProductForm'].validate(valid => {
        debugger
        if (!valid) return
        let postData = Object.assign({}, this.variantProductForm, {
          templateId: this.product.templateId,
          creditStrategy: this.variantProductForm.creditStrategy
            ? 'SEASON'
            : 'NONE'
        })
        postData.titleImage = postData.titleImage.split('/').pop()
        postData.descImage = postData.descImage.split('/').pop()
        console.log(postData)
        ajax
          .post(`${BACKEND_URL}/api/product/variant`, {
            prodJson: JSON.stringify(postData)
          })
          .then(resp => {
            let result = resp.data
            this.handleOpSuccess(result)
            this.show = false
            this.clearObj(this.variantProductForm)
            this.$emit('success')
          })
      })
    },
    modifyProductVariant() {
      this.$refs['variantProductForm'].validate(valid => {
        debugger
        if (!valid) return
        let postData = Object.assign({}, this.variantProductForm, {
          templateId: this.product.templateId,
          creditStrategy: this.variantProductForm.creditStrategy
            ? 'SEASON'
            : 'NONE'
        })
        postData.titleImage = postData.titleImage.split('/').pop()
        postData.descImage = postData.descImage.split('/').pop()
        ajax
          .put(`${BACKEND_URL}/api/product/variant/${this.variant.prodId}`, {
            prodJson: JSON.stringify(postData)
          })
          .then(resp => {
            let result = resp.data
            this.handleOpSuccess(result)
            this.show = false
            this.clearObj(this.variantProductForm)
            this.$emit('success')
          })
      })
    },
    handleUploadProductImageSuccess(res, file) {
      this.variantProductForm.titleImage = res.data.fileName
      this.productImageUrl = URL.createObjectURL(file.raw)
    },
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2
      return true
    },
    handleUploadProductDetailImageSuccess(res, file) {
      this.variantProductForm.descImage = res.data.fileName
      this.productDetailImageUrl = URL.createObjectURL(file.raw)
    }
  },
  watch: {
    show() {
      this.visible = this.show
    },
    product() {
      debugger
      if (this.status === 'MODIFY') {
        Object.assign(this.variantProductForm, this.variant)
        this.productImageUrl = this.variant.titleImage
        this.productDetailImageUrl = this.variant.descImage
      } else {
        this.clearObj(this.variantProductForm)
        Object.assign(this.variantProductForm, this.product)
        this.productImageUrl = this.product.titleImage
        this.productDetailImageUrl = this.product.descImage
      }
    }
  }
}
</script>

<style scoped>
</style>
